<template>
  <view class="container">
    <!-- 美食标题 -->
    <view class="header">
      <text class="title">鱼丸</text>
    </view>
    
    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 美食图片 -->
      <view class="main-image">
        <image src="/static/food/yw.jpg" mode="aspectFill"></image>
      </view>
      
      <!-- 美食描述 -->
      <view class="description">
        <text class="desc-title">美食简介</text>
        <text class="desc-content">福州鱼丸是福州最具代表性的传统小吃之一，有着悠久的历史。它以鲜鱼肉为主要原料，配以淀粉、猪肉馅等制作而成。福州鱼丸的特点是色泽洁白，质地柔软有弹性，味道鲜美，汤汁浓郁。</text>
        
        <text class="desc-content">福州鱼丸的制作工艺十分讲究。首先需要选择新鲜的海鱼，通常使用鳗鱼、鲨鱼或草鱼，将鱼肉刮下，去除鱼刺，然后反复捶打至细腻的鱼茸。接着加入适量的淀粉、盐等调味料，搅拌均匀后制成鱼丸皮。最后将精心调制的猪肉馅包入鱼丸皮中，制成大小适中的鱼丸。</text>
        
        <text class="desc-content">在福州，鱼丸不仅是一种小吃，更是一种文化象征。无论是在街头巷尾的小吃摊，还是在高档餐厅，都能看到福州鱼丸的身影。福州人常常将鱼丸作为招待客人的美食，也是节日庆典中不可或缺的一道佳肴。</text>
      </view>
      
      <!-- 美食特色 -->
      <view class="features">
        <text class="section-title">美食特色</text>
        
        <view class="feature-list">
          <view class="feature-item">
            <text class="feature-icon">🐟</text>
            <text class="feature-text">新鲜鱼肉制作</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">💪</text>
            <text class="feature-text">口感Q弹</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🥩</text>
            <text class="feature-text">内馅丰富</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🍲</text>
            <text class="feature-text">汤汁鲜美</text>
          </view>
        </view>
      </view>
      
      <!-- 推荐店铺 -->
      <view class="shops">
        <text class="section-title">推荐店铺</text>
        
        <view class="shop-list">
          <view class="shop-item">
            <text class="shop-name">永和鱼丸</text>
            <text class="shop-address">福州市台江区交通路8号</text>
            <text class="shop-feature">百年老字号，传统工艺</text>
          </view>
          <view class="shop-item">
            <text class="shop-name">同利肉燕老铺</text>
            <text class="shop-address">福州市鼓楼区南后街82号</text>
            <text class="shop-feature">三坊七巷内，环境优雅</text>
          </view>
          <view class="shop-item">
            <text class="shop-name">依土捞化</text>
            <text class="shop-address">福州市鼓楼区庆城路15号</text>
            <text class="shop-feature">地道福州味，性价比高</text>
          </view>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  padding: 30rpx;
  text-align: center;
  background-color: #E63946;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.content {
  flex: 1;
}

.main-image {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.main-image image {
  width: 100%;
  height: 100%;
}

.description {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.desc-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.desc-content {
  display: block;
  font-size: 32rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20rpx;
}

.features {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background-color: rgba(230, 57, 70, 0.05);
  padding: 20rpx;
  border-radius: 10rpx;
}

.feature-icon {
  font-size: 48rpx;
}

.feature-text {
  font-size: 28rpx;
  color: #333;
}

.shops {
  padding: 40rpx;
  background-color: #fff;
}

.shop-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.shop-item {
  padding: 30rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  border-left: 6rpx solid #E63946;
}

.shop-name {
  display: block;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.shop-address {
  display: block;
  font-size: 30rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.shop-feature {
  display: block;
  font-size: 28rpx;
  color: #E63946;
}
</style>